<template>
  <div class="content-panel">
    <div v-show="!toggle" class="system-panel">
      <el-row :gutter="10">
        <template v-for="(item, index) in settingConfig.items" :key="item.name">
          <el-col :span="12" @click="editConfig(index)">
            <div class="bg-box">
              <div class="icon">
                <el-image :src="item.imgUrl" style="width: 38px; height: 38px; marginTop: 18px;" />
              </div>
              <div class="discripinfo">
                  <span class="setting-name">{{ item.name }}</span>
                  <span class="setting-tip">{{ item.tips }}</span>
              </div>
            </div>
          </el-col>
        </template>
      </el-row>
    </div>
    <Individuation v-show="toggle" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { settingConfig } from './config'
import Individuation from './cpns/individuation.vue'

const toggle = ref(false)
const editConfig = (index: number) => {
  toggle.value = true
  console.log(index)
}

</script>

<style lang="less" scoped>
.system-panel {
  width: 100%;
  height: 100%;
  display: block;
  overflow-x: hidden;
  padding: 10px;
  perspective: 500px;
  box-sizing: border-box;
}

.bg-box {
  background: rgba(255, 255, 255, .5);
  width: 100%;
  height: 70px;
  margin-top: 10px;
  box-sizing: border-box;
  transition: all .3s ease-in-out;
  display: flex;
  justify-content: center;
  border-radius: 10px;
  &:hover {
    background: rgba(255, 255, 255, .8);
    transform: rotateY(10deg);
    transition: all .3s ease-in-out;
    cursor: pointer;
   opacity: 0.7;
    .icon {
      position: relative;
      top: -10px;
      transition: all .4s ease-in-out;
    }
  }

  .icon {
    width: 70px;
    height: 70px;
    transition: all .4s ease-in-out;
  }

  .discripinfo {
    width: 280px;
    height: 50px;
    padding: 10px 0px;
    // float: right;

    .setting-name {
      display: block;
      height: 25px;
      line-height: 25px;
      text-align: left;
      font-size: 16px;
      font-weight: bold;
      color: #393939;
    }

    .setting-tip {
      display: block;
      height: 25px;
      line-height: 25px;
      text-align: left;
      font-size: 14px;
      color: #646464;
    }
  }
}
</style>
